<template>
  <div class="min-h-screen bg-neutral text-dark antialiased">
    <!-- 原生导航栏 - 带吸顶效果 -->
    <header
      class="w-full transition-all duration-500 ease-out"
      :style="{
        paddingTop: isSticky ? '8px' : '16px',
        paddingBottom: isSticky ? '8px' : '16px',
        boxShadow: isSticky
          ? '0 4px 20px rgba(26, 54, 93, 0.12)'
          : '0 2px 12px rgba(26, 54, 93, 0.08)',
        backgroundColor: `rgba(255, 255, 255, ${isSticky ? 0.98 : 1})`,
        backdropFilter: isSticky ? 'blur(8px)' : 'none',
        position: isSticky ? 'sticky' : 'static',
        top: isSticky ? '0' : 'auto',
        zIndex: 100,
      }"
    >
      <div class="container mx-auto px-4">
        <div class="flex items-center justify-between">
          <!-- Logo区域 -->
          <div class="flex items-center">
            <i
              class="fa fa-gavel mr-2 text-[#1a365d] text-2xl transition-transform duration-500"
              :style="{ transform: isSticky ? 'scale(0.95)' : 'scale(1)' }"
            ></i>
            <span
              class="font-bold text-[#1a365d] transition-all duration-500"
              :style="{ fontSize: isSticky ? '1.3rem' : '1.5rem' }"
              >艺拍堂</span
            >
          </div>

          <!-- 桌面端导航菜单 -->
          <nav class="hidden md:flex items-center space-x-1">
            <router-link to="/home" class="nav-item" :class="{ 'nav-item-active': isHomeActive }">
              首页
            </router-link>
            <router-link
              to="/upcoming"
              class="nav-item"
              :class="{ 'nav-item-active': currentRoute === '/upcoming' }"
            >
              即将开拍
            </router-link>
            <router-link
              to="/featured"
              class="nav-item"
              :class="{ 'nav-item-active': currentRoute === '/featured' }"
            >
              精选拍品
            </router-link>
            <router-link
              to="/categories"
              class="nav-item"
              :class="{ 'nav-item-active': currentRoute === '/categories' }"
            >
              拍品分类
            </router-link>
            <router-link
              to="/about"
              class="nav-item"
              :class="{ 'nav-item-active': currentRoute === '/about' }"
            >
              关于我们
            </router-link>
          </nav>

          <!-- 移动端菜单按钮 -->
          <button
            class="md:hidden text-[#1a365d] p-2"
            @click="mobileMenuOpen = !mobileMenuOpen"
            aria-label="菜单"
          >
            <i class="fa fa-bars text-xl"></i>
          </button>
        </div>

        <!-- 移动端导航菜单 -->
        <div
          class="md:hidden mt-3 overflow-hidden transition-all duration-300 ease-in-out"
          :style="{ maxHeight: mobileMenuOpen ? '250px' : '0' }"
        >
          <nav class="flex flex-col space-y-1 py-2">
            <router-link
              to="/home"
              class="mobile-nav-item"
              :class="{ 'mobile-nav-item-active': isHomeActive }"
              @click="mobileMenuOpen = false"
            >
              首页
            </router-link>
            <router-link
              to="/upcoming"
              class="mobile-nav-item"
              :class="{ 'mobile-nav-item-active': currentRoute === '/upcoming' }"
              @click="mobileMenuOpen = false"
            >
              即将开拍
            </router-link>
            <router-link
              to="/featured"
              class="mobile-nav-item"
              :class="{ 'mobile-nav-item-active': currentRoute === '/featured' }"
              @click="mobileMenuOpen = false"
            >
              精选拍品
            </router-link>
            <router-link
              to="/categories"
              class="mobile-nav-item"
              :class="{ 'mobile-nav-item-active': currentRoute === '/categories' }"
              @click="mobileMenuOpen = false"
            >
              拍品分类
            </router-link>
            <router-link
              to="/about"
              class="mobile-nav-item"
              :class="{ 'mobile-nav-item-active': currentRoute === '/about' }"
              @click="mobileMenuOpen = false"
            >
              关于我们
            </router-link>
          </nav>
        </div>
      </div>
    </header>

    <!-- 主内容区域 -->
    <main class="container mx-auto px-4">
      <router-view />
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, onUnmounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

// 状态管理
const mobileMenuOpen = ref(false)
const scrollY = ref(0)
const route = useRoute()
const router = useRouter()

// 获取当前路由
const currentRoute = computed(() => {
  return route.path
})

// 首页激活状态判断：根路径/或/home都视为首页激活
const isHomeActive = computed(() => {
  return currentRoute.value === '/' || currentRoute.value === '/home'
})

// 页面加载时如果是根路径，可选是否重定向（根据实际需求）
onMounted(() => {
  // 如果你希望访问/时实际跳转到/home页面，可以启用下面这行
  // if (route.path === '/') router.push('/home')
})

// 吸顶效果进度计算
const stickyProgress = computed(() => {
  return Math.min(1, Math.max(0, scrollY.value / 100))
})

// 吸顶状态
const isSticky = computed(() => {
  return stickyProgress.value > 0.1
})

// 滚动事件处理
const handleScroll = () => {
  scrollY.value = window.scrollY
  requestAnimationFrame(() => {
    // 动画帧更新
  })
}

// 监听路由变化，关闭移动菜单
watch(
  () => route.path,
  () => {
    mobileMenuOpen.value = false
  }
)

// 生命周期管理
onMounted(() => {
  window.addEventListener('scroll', handleScroll, { passive: true })
  handleScroll()
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped>
/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 桌面端导航项样式 */
.nav-item {
  display: inline-block;
  padding: 10px 16px;
  color: #1a365d;
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease;
  border-radius: 4px;
  margin: 0 2px;
}

.nav-item:hover {
  background-color: rgba(26, 54, 93, 0.05);
  transform: translateY(-1px);
}

.nav-item-active {
  font-weight: 600;
}

.nav-item-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #1a365d;
  border-radius: 3px 3px 0 0;
  transition: all 0.5s ease;
}

/* 移动端导航项样式 */
.mobile-nav-item {
  display: block;
  padding: 10px 16px;
  color: #1a365d;
  text-decoration: none;
  transition: all 0.3s ease;
  border-radius: 4px;
}

.mobile-nav-item:hover {
  background-color: rgba(26, 54, 93, 0.05);
}

.mobile-nav-item-active {
  font-weight: 600;
  background-color: rgba(26, 54, 93, 0.08);
}

/* 主内容区域样式 */
main {
  padding-top: 20px;
}

/* 平滑滚动 */
html {
  scroll-behavior: smooth;
}
</style>
